<template>
  <el-table :data="props.data" border>
    <el-table-column type="index" align="center" width="50" />
    <el-table-column prop="type" label="类型" align="center" min-width="20%"/>
    <el-table-column prop="name" label="名称" align="center" min-width="40%"/>
    <el-table-column prop="amount" label="金额" align="center" min-width="20%">
      <template #default="scope">
        {{ formatAmount(scope.row.amount) }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { formatAmount } from 'vue3-common/utils/numberUtil'
import { defineProps, PropType } from 'vue'
import { ITravelConsume } from '@/types/travel.ts'

const props = defineProps({
  data: {
    required: true,
    type: Array as PropType<ITravelConsume[]>
  }
})
</script>
